<template>
	<div class="sys-menu-container">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="栏目名称">
					<el-input v-model="state.queryParams.title" placeholder="栏目名称" clearable />
				</el-form-item>
				<el-form-item label="栏目编号">
					<el-input v-model="state.queryParams.code" placeholder="栏目编号" clearable />
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="ele-Plus" @click="openAddColumn"> 新增 </el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="full-table" shadow="hover" style="margin-top: 8px">
			<el-table :data="state.commonData" v-loading="state.loading" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
				<el-table-column prop="id" label="编号" header-align="center" show-overflow-tooltip />

				<el-table-column prop="title" label="栏目名称" header-align="center" show-overflow-tooltip />
				<el-table-column prop="tempName" label="模板名称" header-align="center" show-overflow-tooltip />
				<el-table-column prop="subTitle" label="副标题" header-align="center" show-overflow-tooltip />
				<el-table-column label="是否顶部显示" align="center" show-overflow-tooltip>
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.isTopShow">是</el-tag>
						<el-tag type="danger" v-else>否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序" width="70" align="center" show-overflow-tooltip />
				<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
					<template #default="scope">
						<el-button  icon="ele-Edit" size="small" text type="primary" @click="openEditMenu(scope.row)" v-auth="'sysMenu:update'"> 编辑 </el-button>
						<el-button v-if="!scope.row.isSystem" icon="ele-Delete" size="small" text type="danger" @click="delMenu(scope.row)" v-auth="'sysMenu:delete'"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<div>
				<el-pagination
					v-model:currentPage="state.tableParams.page"
					v-model:page-size="state.tableParams.pageSize"
					:total="state.tableParams.total"
					:page-sizes="[10, 20, 50, 100]"
					small
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					layout="total, sizes, prev, pager, next, jumper"
				/>
			</div>
		</el-card>

		<EditColumn ref="editColumnRef" :isadd="state.isadd" :title="state.editcommonTitle" :columnData="state.commonData" @handleQuery="handleQuery" />
	</div>
</template>
<script lang="ts" setup name="cms_common">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { pageCms_Common, deleteCms_Common, getStepBodys, selectColumnTree } from '/@/api/CMS/cms_common';
import { getAPI } from '/@/utils/axios-utils';
import { APIJSONApi } from '/@/api-services/api';
import EditColumn from '/@/views/CMS/cms_column/common/editColumn.vue';
const editColumnRef = ref<InstanceType<typeof EditColumn>>();
const state = reactive({
	isadd: false,
	loading: false,
	commonData: [],
	queryParams: {
		title: undefined,
		code: undefined,
	},
	tableParams: {
		page: 1,
		pageSize: 20,
		total: 0 as any,
	},
	editcommonTitle: '',
});
onMounted(async () => {
	handleQuery();
});

// 查询操作
const getData = (param: any) => {
	return selectColumnTree(param).then((res) => {
		return res.data;
	});
};
// 打开编辑页面
const openEditMenu = (row: any) => {
	state.isadd = false;
	state.editcommonTitle = '编辑栏目';
	editColumnRef.value?.openDialog(row);
};
// 重置操作
const resetQuery = () => {
	state.queryParams.title = undefined;
	state.queryParams.code = undefined;
	handleQuery();
};
// 打开新增页面
const openAddColumn = () => {
	state.isadd = true;
	state.editcommonTitle = '添加栏目';
	editColumnRef.value?.openDialog({});
};
const handleQuery = async () => {
	state.loading = true;
	var res = await selectColumnTree(state.queryParams);
	state.commonData = res.data.result ?? [];
	state.tableParams.total = res.data.result?.total;
	state.loading = false;
};
const handleCurrentChange = async (val: number) => {
	state.tableParams.page = val;
	handleQuery();
};
// 改变页面容量
const handleSizeChange = (val: number) => {
	state.tableParams.pageSize = val;
	handleQuery();
};

// 删除当前行
const delMenu = (row: any) => {
	ElMessageBox.confirm(`确定删除栏目：【${row.title}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await deleteCms_Common({ id: row.id });
			handleQuery();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};
</script>

<style></style>
